<template>
    <div class="top">
        <div class="left">
            <span>订单提交成功，请尽快付款！订单号:</span>
            <b style="color:red;">{{ order_id }}</b>
        </div>
        <div class="total_fee">
            应付金额
            <b style="color:red;font-size:20px">
                {{ orderInfo?.total_fee }}
            </b>
            元
        </div>
    </div>
    <div class="payment">
        <div class="title">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wechat_pay">
                </use>
            </svg>
            <b>
                微信支付
            </b>
            <span>请使用微信扫码支付</span>
        </div>
        <div class="main">
            <div class="left">
                <div class="qrcode" v-loading="qrLoading">
                    <!-- 展示二维码的地方 -->
                    <img :src="qrUrl" width="300" height="300" alt="">
                    <div class="pw-box-ft">
                        <div class="svg">
                            <svg class="icon">
                                <use xlink:href="#icon-weixin1"></use>
                            </svg>
                        </div>
                        <div class="qr-right">
                            <p>请使用微信扫一扫</p>
                            <p>扫描二维码支付</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">

            </div>
        </div>
        <el-descriptions title="订单信息">
            <el-descriptions-item label="创建时间">
                {{ orderInfo?.create_time }}
            </el-descriptions-item>
            <el-descriptions-item label="用户名">
                {{ orderInfo?.user_nickname }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                {{ orderInfo?.user_phone }}
            </el-descriptions-item>
            <el-descriptions-item label="产品名称">
                {{ orderDetail?.productName }}
            </el-descriptions-item>
            <el-descriptions-item label="产品描述">
                {{ orderDetail?.description }}
            </el-descriptions-item>
            <el-descriptions-item label="收件地址">
                {{ orderInfo?.address }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script setup>
import { useRouter, useRoute } from "vue-router"
import { ref, watch, onUnmounted } from "vue"
import * as api from "@/api/vip"
//引入将支付地址生成二维码的插件
import qrcode from "qrcode"
let route = useRoute()
let router = useRouter()
let order_id = route.query.order_id;

//1.获取query传递的订单id
//2.根据订单id获取订单详情
//3.展示订单详情内容
//4.发起请求,请求支付

let orderDetail = ref() //订单详情
let orderInfo = ref() //全部订单信息
let getOrderDetail = async () => {
    try {
        let res = await api.getOrderApi(order_id);
        // console.log(res)
        orderDetail.value = res.data.data.orderDetail[0];
        orderInfo.value = res.data.data;
        // console.log(orderInfo.value)

        //如果订单的状态不是1,那么要重新回到充值页面
        if (res.data.data.order_status !== 1) {
            //重新跳转到订单页
            router.push({ name: 'order' })
        }
    } catch (e) {

    }
}
getOrderDetail()

//侦听订单数据的变化
// 存储二维码地址
let qrUrl = ref()
//二维码加载动画
let qrLoading = ref(false);

watch(orderInfo, async (newVal) => {
    //打开加载动画
    qrLoading.value = true
    // console.log(newVal)
    //发起支付请求
    try {

        //先判断本地有没有这个订单的二维码支付地址,如果有就直接赋值,没有再发起请求

        let cacheQrUrl = localStorage.getItem(order_id);

        if (cacheQrUrl) {
            //如果本地有,直接赋值给二维码图片
            qrUrl = cacheQrUrl;
            //关闭加载框
            qrLoading.value = false
            //阻止下面代码执行
            return
        }

        let res = await api.payMentApi(order_id);
        // console.log(res)
        //获取微信支付的地址
        let code_url = res.data.code_url;
        //转换成二维码
        qrcode.toDataURL(code_url, (err, url) => {
            console.log(url) //二维码图片地址
            qrUrl.value = url;

            //将来可能需要重新支付,所以选择缓存订单编号和二维码图片地址到本地

            localStorage.setItem(order_id, url)

            //关闭加载动画
            qrLoading.value = false;
        })
    } catch (e) {

    }
})

//声明一个存储定时器的变量

let interval = null;

//轮询查询支付结果

let polling = () => {
    interval = setInterval(async () => {
        let res = await api.pollingPayStatusApi(order_id);
        console.log(res)

        //根据轮询的状态,判断是否支付

        let { status } = res.data;

        //3005的状态是可支付的
        if (status !== 3005 && status !== 200) {
            router.push({ name: 'charge' })
        } else if (status == 200) {
            //支付成功,跳转到支付成功页面
            router.push({ name: 'success' })
            //清除本地缓存的支付图片地址
            localStorage.removeItem(order_id)
        }


    }, 3000)
}

polling()

onUnmounted(() => {
    //清除定时器
    clearInterval(interval)
})

</script>
<style scoped lang="scss">
.payment {
    background-color: #fff;
    padding: 5px 30px;
    box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
}

.main {
    display: flex;
    justify-content: center;
}

.top {
    padding: 5px 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .total_fee {
        margin-top: 10px;
    }
}

.title {
    margin: 10px 20px;

    b {
        font-size: 30px;
        display: inline-block;
        margin-right: 135px;
    }

    :deep(.icon) {
        vertical-align: text-bottom;
        width: 2em;
        height: 2em;
        margin-right: 10px;
    }
}

.pw-box-ft {
    height: 44px;
    padding: 8px 0 8px;
    background-image: linear-gradient(135deg, #4c67ff, #5635df);
    display: flex;

    justify-content: space-evenly;

    .qr-right {
        p {
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            font-weight: 700;
        }
    }

    .icon {

        width: 3em;
        height: 3em;
    }
}




.right {
    width: 379px;
    height: 421px;
    padding-left: 50px;
    margin-top: -20px;
    background: url("../../../../assets/phone.png") 50px 0 no-repeat;
}
</style>